<load href="__STATIC__/admin/vue/vue.js"/>
<load href="__STATIC__/admin/vue/vue-resource.min.js"/>
<include file="System:leftmenu" />
<div id="app" class="content-right fl">
 
    <h1 class="content-right-title">关键词回复</h1>
    
    <div id="keyword">
		<template v-for='(index,keyword) in clickwords'>
	        <div class="formitems">  
				<label class="fi-name">自定义菜单回复</label>
				<div class="form-controls">
					<input type="text" class="input mini" name="keyword" v-model="clickwords[index].keyword" readonly>
					<textarea  class="textarea small" style="width:240px;" v-model="clickwords[index].reply_text"></textarea>
					<a v-on:click="submitclick($event)" index="{{ index }}" id="{{ keyword.id }}" class="btn btn-primary j-add">保存</a>
				</div>
			</div>
		</template>
	</div>
	
	<form action="" id="form" method="POST"  onsubmit="return false;">
	<div id="keyword">
		<template v-for='(index,keyword) in keywords'>
	        <div class="formitems">  
				<label class="fi-name">{{(keyword.keyword=='defaults'?'默认':(keyword.keyword=='subscribe'?'关注':'关键词'))}}回复</label>
				<div class="form-controls">
					<input type="text" class="input mini" name="keyword" v-model="keywords[index].keyword" v-bind="{ readonly:(keyword.keyword=='defaults'||keyword.keyword=='subscribe') }">
					<textarea  class="textarea small" style="width:240px;" v-model="keywords[index].reply_text"></textarea>
					<div v-if="!(keyword.keyword=='defaults'||keyword.keyword=='subscribe')" class="radio-group">
                    <label><input type="radio" name="is_jingzhun" value="0" v-model="keywords[index].is_jingzhun" >模糊匹配</label>
                    <label><input type="radio" name="is_jingzhun" value="1" v-model="keywords[index].is_jingzhun" >精准匹配</label>
                	</div>
					<a v-on:click="submitkey($event)" index="{{ index }}" id="{{ keywords[index].id }}" v-bind:class="{ 'btn-primary':keywords[index].id,'btn-success':!keywords[index].id }" class="btn  j-add">保存</a>
					<a v-if="!(keyword.keyword=='defaults'||keyword.keyword=='subscribe')" v-on:click="deletekey($event)" index="{{ index }}" id="{{ keywords[index].id }}" class="btn btn-danger j-add">删除</a>
				
				</div>
			</div>
		</template>
	</div>
		<div style="width:400px" class="form-controls">
			<a v-on:click="addkey" class="fi-help-text btn btn-primary" id="add-guige" >添加规则</a>
		</div>
	</form>

</div>

<script>
var app = new Vue({
	el:'#app',
	data:{
		clickwords:[],
		keywords:[],
	},
	init:function(){
		this.$http.get('/Admin/System/getKeywords?click=0')
		.then(
				function(res){
					if(res.data){
						this.keywords = res.data;
					}
				}, 
				function(){}
			);
		
		this.$http.get('/Admin/System/getKeywords?click=1')
		.then(
				function(res){
					if(res.data){
						this.clickwords = res.data;
					}
				}, 
				function(){}
			);
	},
	methods:{
		submitkey:function(e){
			layer.load();
			var id = e.target.id;
			var index = e.target.getAttribute('index');
			
			var data = this.keywords[index];
			this.$http.post('/Admin/System/addKey',data,{emulateJSON:true})
			.then(
				function(res){
					var res = res.data;
					if(res.ret == 0){
						if(!id){
							this.keywords[index].id = res.data;
						}
						layer.msg(res.msg, {icon: 1});
						layer.closeAll('loading');
					}else{
						layer.msg(res.msg, {icon: 7});
						layer.closeAll('loading');
					}
				}, 
				function(){}
				);
		},
		deletekey:function(e){
			var self = this;
			var title = "你确定要删除该规则吗？";
			layer.confirm(title, {
			    btn: ['确定','我再想想'] //按钮
			}, function(){
				layer.load();
				var id = e.target.id;
				var index = e.target.getAttribute('index');
				var data = self.keywords[index];
				if(id){
					self.$http.post('/Admin/System/deleteKey',data,{emulateJSON:true})
					.then(
						function(res){
							var res = res.data;
							if(res.ret == 0){
								self.keywords.splice(index,1);
								layer.msg(res.msg, {icon: 1});
								layer.closeAll('loading');
							}else{
								layer.msg(res.msg, {icon: 7});
								layer.closeAll('loading');
							}
						}, 
						function(){}
						);
				}else{
					self.keywords.splice(index,1);
					layer.msg("删除成功", {icon: 1});
					layer.closeAll('loading');
				}
			}, function(){
				layer.msg('你取消了提交', {icon: 7});
				return;
			});
			
			
		},
		submitclick:function(e){
			layer.load();
			var id = e.target.id;
			var index = e.target.getAttribute('index');
			
			var data = this.clickwords[index]
			this.$http.post('/Admin/System/addKey',data,{emulateJSON:true})
			.then(
				function(res){
					var res = res.data;
					if(res.ret == 0){
						layer.msg(res.msg, {icon: 1});
						layer.closeAll('loading');
					}else{
						layer.msg(res.msg, {icon: 7});
						layer.closeAll('loading');
					}
				}, 
				function(){}
				);
		},
		addkey:function(){
			var newkey = {
							"id":"",
							"keyword":"",
							"reply_text":"",
							"r_type":"1",
							"is_jingzhun":0
						  };
			this.keywords.push(newkey);
		}
	},
});

</script>